<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">首件质检保存</block>
			</cu-custom>
			<!-- 数据列表 -->
			<form @submit="handleSubmit">
				<view class="cu-form-group flex">
					<view class="title">线别：{{objMsg.lineType}}</view>
					<view class="flex"><text>站别：</text><input name="standBy" class="border" placeholder="请输入站别"></input></view>
				</view>
				<view class="cu-form-group">
					<view class="title">首件确认项目：</view>
					<label>{{objMsg.commandbillCode}}</label>
				</view>
				<view class="cu-form-group">
					<view class="title">机型：{{objMsg.mechanismCode}}</view>
					<label>是否环保：<switch @change="handleSwitch('switchProtectionIndex', $event)" :class="switchProtectionIndex?'checked':''" :checked="switchProtectionIndex?true:false"></switch></label>
				</view>
				
				<view class="flex justify-between margin-xs radius">
					<view class="padding-sm">工艺要求：</view>
					<view class="flex-sub padding-sm">
						<radio-group name="craftAsk" class="flex" @change="radioChange('radioItems', 'radioCurrent', $event)">
							<label class="flex-sub flex justify-center align-center" v-for="(item, index) in radioItems" :key="item.value">
								<view class="margin-right-sm">
									<radio class="green" :value="item.value" :checked="index === radioCurrent" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<template v-for="(item, index) in firstPieceDipLogList">
					<template v-if="item.type === '1'" v-for="(child, childIndex) in item.child">
						<view class="cu-form-group">
							<view class="titles">{{child.firstContent}}</view>
							<label><switch name="protection" @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>
					<template v-if="item.type === 'showBtn'">
						<view class="grid col-5 padding-sm">
							<button class="cu-btn bg-blue btn1 round" @click="addSlot">添加插件</button>
						</view>
					</template>	
					<template v-if="item.type === '2'">
						<view class="border margin-xl shadow animation-slide-bottom" v-for="(child, childIndex) in item.child" :style="[{animationDelay: (childIndex + 1)*0.1 + 's'}]">
							<view class="flex">
								<view class="cu-form-group text-blue margin-xs padding-sm">
									是否合格：<label><switch name="protection" @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
								</view>
								<button class="flex-sub cu-btn sm" @click="deleteRows(index,childIndex)">
									<text class="lg text-gray cuIcon-close"></text>
								</button>
							</view>
							<view class="cu-form-group text-blue margin-xs padding-sm">
								插件{{childIndex + 1}}号位：<input class="border" placeholder="请输入" v-model="child.firstContent"></input>
							</view>
							
						</view>
						
					</template>
					<template v-if="item.type === '3'">
						<view class="cu-form-group" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>
					<template v-if="item.type === '4'">
						<view class="cu-form-group" v-for="(child, childIndex) in item.child">
							<view class="titles margin-right-sm">{{child.firstContent}}
								<view class="flex">
									<input class="border" placeholder="" v-model="child.code1"></input>
									<input v-if="childIndex === 1" class="border" placeholder="" v-model="child.code2"></input>
									<input v-if="childIndex === 1" class="border" placeholder="" v-model="child.code3"></input>
								</view>
							</view>
							<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>	
					<template v-if="item.type === '5'">
						<view class="cu-form-group" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>
					<template v-if="item.type === 'showBtn2'">
						<view class="grid col-5 padding-sm">
							<button class="cu-btn bg-blue btn1 round" @click="addRepair">添加补焊</button>
						</view>
					</template>	
					<template v-if="item.type === '6'">
						<view class="border margin-xl shadow animation-slide-bottom" v-for="(child, childIndex) in item.child" :style="[{animationDelay: (childIndex + 1)*0.1 + 's'}]">
							<view class="flex">
								<view class="cu-form-group text-blue margin-xs padding-sm">
									是否合格：<label><switch name="protection" @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
								</view>
								<button class="flex-sub cu-btn sm" @click="deleteRows(index,childIndex)">
									<text class="lg text-gray cuIcon-close"></text>
								</button>
							</view>
							<view class="cu-form-group text-blue margin-xs padding-sm">
								补焊{{childIndex+1}}、烙铁编号：<input class="border" placeholder="请输入烙铁编号" v-model="child.code"></input>
							</view>
							<view class="flex padding-sm">
								<view class="flex flex-wrap margin-right-sm">
									<view class="">温度要求：</view>
									<input class="border" type="digit" placeholder="请输入" v-model="child.expect"></input>
								</view>
								<view class="flex flex-wrap margin-right-sm">
									<view class="">温度实测：</view>
									<input class="border" type="digit" placeholder="请输入" v-model="child.now"></input>
								</view>
								<view class="flex flex-wrap">
									<view class="">漏电值：</view>
									<input class="border" type="digit" placeholder="请输入" v-model="child.leakageVal"></input>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.type === '7'">
						<view class="cu-form-group" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>
					<template v-if="item.type === '8'">
						<view class="border shadow" v-for="(child, childIndex) in item.child">
							<view class="cu-form-group margin-xs padding-sm">
								{{child.firstContent}}<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
							</view>
							<view class="flex padding-sm">
								<view class="flex flex-wrap margin-right-sm">
									<view class="">力矩要求：</view>
									<input class="border" placeholder="请输入" v-model="child.expect"></input>
								</view>
								<view class="flex flex-wrap margin-right-sm">
									<view class="">力矩实测：</view>
									<input class="border" placeholder="请输入" v-model="child.now"></input>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.type === '9'">
						<view class="cu-form-group" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<label><switch @change="handleContentSwitch(index, childIndex, $event)" :class="child.index?'checked':''" :checked="child.index?true:false"></switch></label>
						</view>
					</template>	
					<template v-if="item.type === 'showBtn3'">
						<view class="grid col-5 padding-sm">
							<button class="cu-btn bg-blue btn1 round" @click="addNewProject">新增项</button>
						</view>
					</template>	
					<template v-if="item.type === '10'">
						<view class="margin-xl shadow">
							<view class="border  animation-slide-bottom" v-for="(child, childIndex) in item.child" :style="[{animationDelay: (childIndex + 1)*0.1 + 's'}]">
								<view class="flex reverse">
									<button class="basis-xs cu-btn sm" @click="deleteRows(index,childIndex)">
										<text class="lg text-gray cuIcon-close"></text>
									</button>
								</view>
								<view class="cu-form-group text-blue margin-xs padding-sm">
									新增项：<input class="border" placeholder="请输入" v-model="child.changeContent"></input>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.type === '11'">
						<view class="cu-form-group flex flex-wrap" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<textarea class="border" maxlength="-1" placeholder="请输入" v-model="child.changeContent"></textarea>
						</view>
					</template>
					<template v-if="item.type === '12'">
						<view class="cu-form-group flex flex-wrap" v-for="(child, childIndex) in item.child">
							<view class="titles">{{child.firstContent}}</view>
							<textarea class="border" maxlength="-1" placeholder="请输入" v-model="child.changeContent"></textarea>
						</view>
					</template>
				</template>
				<view class="cu-form-group align-start" style="padding-top: 10px;">
					<view class="title">拍照上传</view>
					<button @tap="takephoto()" class="cu-btn bg-rgb shadow lg" style="width: 100px;">拍照上传</button>
				</view>
				<view class="picture-box">
					<image :src="item" v-for="item in imglist"></image>
				</view>
				<button form-type="submit" class="btns cu-btn bg-rgb lg animation-fade">保存</button>
				
			</form>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglist: [],
				firstPieceDipLogList: [
					{
						type: '1',
						child: [
							{
								firstContent: '检查助焊剂/物料包装是否有ROSH标识',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '分板：选择手工分或机分，注意方向，防撞件和报废',
								index: false,
								params: 'query1'
							},
								{
								firstContent: '贴胶纸：明确位置，防上锡',
								index: false,
								params: 'query1'
							},
							
						]
					},
					{type: 'showBtn'},
					{
						type: '2',
						child: []
					},
					{
						type: '3',
						child: [
							{
								firstContent: '放挡锡条、压块：明确位置和方向，防浮高',
								index: false,
								params: 'query1'
							},
								{
								firstContent: '炉前外观：预防外观性错件、浮高、漏件、反向',
								index: false,
								params: 'query1'
							},
							
						]
					},
					{
						type: '4',
						child: [
							{
								firstContent: '波峰焊焊接状况：助焊剂',
								index: false,
								code1: '',
								params: 'query1'
							},
							{
								firstContent: '波峰焊焊接状况：预热',
								index: false,
								code1: '',
								code2: '',
								code3: '',
								params: 'query1'
							},
							{
								firstContent: '波峰焊焊接状况：炉温',
								index: false,
								code1: '',
								params: 'query1'
							}
						]
					},
					{
						type: '5',
						child: [
							{
								firstContent: '接取夹具、撕胶纸',
								index: false,
								params: 'query1'
							},
						]
					},
					{type: 'showBtn2'},
					{
						type: '6',
						child: []
					},
					{
						type: '7',
						child: [
							{
								firstContent: '洗板：清洁黑色松香',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '压接：预防批量错料,过压',
								index: false,
								params: 'query1'
							}
						]
					},
					{
						type: '8',
						child: [
							{
								firstContent: '装配：预防撞件,浮高,漏装螺丝',
								index: false,
								expect: '',
								now: ''
							}
						]
					},
					{
						type: '9',
						child: [
							{
								firstContent: '装电池：预防漏装和装反',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '贴条码：明确位置、方向',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '板面点胶：明确位置,防漏点',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '板底点胶：明确位置,防漏点',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '板面外观：预防外观性错件、浮高、漏件、反向',
								index: false,
								params: 'query1'
							},
							{
								firstContent: '板底外观：预防连锡、少锡、不出脚',
								index: false,
								params: 'query1'
							},
							
						]
					},
					{type: 'showBtn3'},
					{type: '10', child: []},
					{
						type: '11',
						child: [{
							firstContent: '变更要求(变更编号及内容简述)',
							changeContent: '',
							params: 'query1'
						},{
							firstContent: '是否符合工艺要求',
							changeContent: '',
							params: 'query1'
						},{
							firstContent: '物料与BOM编码描述一致性',
							changeContent: '',
							params: 'query1'
						},{
							firstContent: '发光二极管首件点亮检测',
							changeContent: '',
							params: 'query1'
						}]
					},
					{
						type: '12',
						child: [
							{
								firstContent: '异常现场及处理记载：',
								changeContent: '',
								params: 'query1'
							}
						]
					}
				],
				objMsg:{},
				switchProtectionIndex: false,
				radioItems: [{
						value: '有铅',
						name: '有铅'
					},
					{
						value: '无铅',
						name: '无铅'
					},
					{
						value: '红胶',
						name: '红胶'
					}
				],
				radioCurrent: -1
			}
		},
		onLoad(e) {
			this.objMsg = uni.getStorageSync('firstPieceSMTQualityInspection');
			console.log(this.objMsg)
			// this.qualityTesting()
		},
		methods: {
			takephoto() {
				let that = this
				let maxUpload = 1
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认1
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: that.$http.config.baseUrl + 'sys/common/upload',
								filePath: item,
								method: 'POST',
								name: 'file',
								header: {
									'X-Access-Token': uni.getStorageSync('Access-Token')
								},
								success: function(uploadFileRes) {
									that.imglist = []
									that.modal.show({
										type: 'success',
										content: '上传成功!'
									})
									let result = JSON.parse(uploadFileRes.data)
									if (result.success) {
										that.imglist = that.imglist.concat([result
											.message]); //concat追加到数组
									} else {
										that.modal.show({
											type: 'error',
											content: result.message
										})
									}
								}
							});
						})
					}
				});
			},
			handleSwitch(index,e) {
				this[index] = e.detail.value
			},	
			handleContentSwitch(index, childIndex, e) {
				this.firstPieceDipLogList[index].child[childIndex].index = e.detail.value
			},
			addSlot() {
				var items = this.firstPieceDipLogList
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(item.type === '2'){
						item.child.push({
							index: false,
							firstContent: ''
						})
					}
				}
			},	
			addRepair() {
				var items = this.firstPieceDipLogList
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(item.type === '6'){
						item.child.push({
								index: false,
								code: '',
								expect: '',
								now: '',
								leakageVal: ''
						})
					}
				}
			},	
			addNewProject() {
				var items = this.firstPieceDipLogList
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(item.type === '10'){
						item.child.push({
								changeContent: ''
						})
					}
				}
			},
			deleteRows(index, childIndex) {
				this.firstPieceDipLogList[index].child.splice(childIndex,1)
			},
			radioChange: function(type, cur, evt) {
				for (let i = 0; i < this[type].length; i++) {
					if (this[type][i].value === evt.target.value) {
						this.cur = i;
						break;
					}
				}
			},
			handleSubmit(e) {
				let {standBy,craftAsk} = e.detail.value
				
				let {lineType, commandbillCode, mechanismCode} = this.objMsg
				
				if (standBy.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入站别' })
					return
				}		
				if (craftAsk.trim().length === 0) {
					this.modal.show({ type:'error', content:'请选择工艺要求' })
					return
				}	
				
				let firstPieceDipLogList = []
				this.firstPieceDipLogList.forEach(item => {
					let {child} = item
					child && child.length && child.forEach((child, childIndex) => {
						let _first = {
							query1: child.index === undefined ? '': child.index + '',
							contentType: item.type,
							firstContent: child.firstContent,
						}
						if (item.type === '2') {
							_first.firstContent = `插件${childIndex + 1}号位：${child.firstContent}`
						}	
						if (item.type === '4') {
							_first.firstContent = child.firstContent + child.code1 + (typeof child.code2 === 'undefined' ? '' : `|${child.code2}`)  + (typeof child.code3 === 'undefined' ? '' : `|${child.code3}`)
						}
						if (item.type === '6') {
							_first.query2 = child.expect
							_first.query3 = child.now
							_first.query4 = child.leakageVal
							_first.firstContent = `补焊${childIndex + 1}、烙铁编号：`+ child.code
						}	
						if (item.type === '8') {
							_first.query2 = child.expect
							_first.query3 = child.now
						}
						if (item.type === '10') {
							_first.firstContent = `新增项：`
						}
						if(item.type === '10' || item.type === '11' || item.type === '12') {
							_first.query1 = child.changeContent
						}
						firstPieceDipLogList.push(_first)
					})
					
				})
				
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let protection = this.switchProtectionIndex + ''
				let params = {
					query1: this.imglist[0],
					lineType,
					firstProject: commandbillCode,
					machineType: mechanismCode,
					firstPieceDipLogList,
					protection,
					...e.detail.value
				}
				this.$http.post('produce/firstPieceDip/add', params).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.modal.show({ type:'success', content:res.data.message })
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						this.modal.show({ type:'error', content:res.data.message })
					}
				})
			}
		},
	}
</script>

<style lang="less">
	.page {
		padding-bottom: 80rpx;
	}
	.borderTop {
		border-top: 0.5px solid #eee;
	}
	.border {
		border: 0.5px solid #eee;
	}
	.checkBoxWrap.cu-form-group+.cu-form-group {
		border: 0;
	}
	.btns{
		position: fixed;
		z-index: 999;
		background: white;
		bottom: 0;
		height: 80rpx;
		line-height: 100rpx;
	}
	.cu-btn{
		width: 650rpx;
		margin-left: 50rpx;
	}
	.btn1 {
		margin-right: 450rpx;
		background-image: radial-gradient(circle, #3F55E9, #5F71ED, #7D8CF0);
	}
	.reverse {
		flex-direction: row-reverse;
	}
	.picture-box {
		width: 100%;
		margin-top: 10px;
	
		.picture {
			width: 100%;
			height: 200px;
			margin-bottom: 10px;
		}
	}
</style>
